<script setup>
// import { ref } from 'vue'
// const count = ref(0)
import { useCounterStore } from '@/stores/counter'
const counterStore = useCounterStore()
const appTitle = import.meta.env.VITE_APP_TITLE;
</script>

<template>
  <div class="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-8">
    <div class="flex space-x-8 mb-12">
      <a href="https://vite.dev" target="_blank" class="transition-transform hover:scale-110">
        <img src="@/assets/images/vite.svg" alt="Vite logo" class="w-24 h-24" />
      </a>
      <a href="https://vuejs.org/" target="_blank" class="transition-transform hover:scale-110">
        <img src="@/assets/images/vue.svg" alt="Vue logo" class="w-24 h-24" />
      </a>
    </div>

    <h1 class="text-4xl font-bold text-blue-600 mb-10">{{ appTitle }}</h1>

    <div class="bg-white p-8 rounded-lg shadow-lg space-y-6 text-center">
      <div class="flex space-x-4 justify-center">
        <button 
          type="button" 
          @click="counterStore.increment" 
          class="bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700 transition-colors"
        >
          count is {{ counterStore.count }}
        </button>
        <button 
          type="button" 
          @click="counterStore.reset" 
          class="bg-gray-600 text-white px-6 py-3 rounded hover:bg-gray-700 transition-colors"
        >
          重置
        </button>
      </div>
      <p class="text-gray-600">
        Edit
        <code class="bg-gray-200 px-1 py-0.5 rounded text-sm">components/HelloWorld.vue</code> 
        to test HMR
      </p>
      <div class="flex space-x-4 justify-center">
        <icon-mdi-account class="text-2xl text-blue-500" />
        <icon-mdi-lock class="text-2xl text-blue-500" />
        <icon-mdi-baby-carriage class="text-2xl text-blue-500" />
      </div>
    </div>

    <div class="mt-8">
      路由示例: 
      <router-link 
        to="/about" 
        class="text-blue-600 hover:underline"
      >
        关于
      </router-link>
    </div>
  </div>
</template>

<style scoped>
</style>
